// 全局图片预览组件
import 'package:flutter/material.dart';
import 'package:flutter_oss_aliyun/flutter_oss_aliyun.dart';
import 'package:fusion_one/dtos/file.dart';
import 'package:ls_loading/Type.dart';
import 'package:ls_loading/ls_loading%20copy.dart';

class ImagePreview extends StatefulWidget {
  // 图片列表
  final List<File> images;
  // 当前图片索引
  final int index;

  ImagePreview({
    Key? key,
    required this.images,
    this.index = 0,
  }) : super(key: key);

  @override
  _ImagePreviewState createState() => _ImagePreviewState();
}

class _ImagePreviewState extends State<ImagePreview> {
  // 当前图片索引
  int currentIndex = 0;
  // 当前图片url
  String url = '';

  @override
  void initState() {
    super.initState();
    setState(() {
      currentIndex = widget.index;
    });
    Client()
        .getSignedUrl(widget.images[currentIndex].fileId,
            process: "image/resize,s_${600}")
        .then((value) {
      setState(() {
        url = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Center(
        child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          url == ""
              ? LsLoading(
                  style: LoadingStyle(
                      color: Colors.blue,
                      strokeWidth: 7,
                      radius: 50,
                      width: 300,
                      height: 300))
              : Image.network(
                  url,
                  loadingBuilder: (context, child, loadingProgress) {
                    if (loadingProgress == null) {
                      return child;
                    }
                    return Container(
                      alignment: Alignment.center,
                      child: CircularProgressIndicator(
                        value: loadingProgress.expectedTotalBytes != null
                            ? loadingProgress.cumulativeBytesLoaded /
                                loadingProgress.expectedTotalBytes!
                            : null,
                      ),
                    );
                  },
                ),
          // 悬浮按钮
        ]),
      ),
      Positioned(
        top: MediaQuery.of(context).size.height / 2 - 25,
        left: 20,
        child: MouseRegion(
          cursor: SystemMouseCursors.click,
          child: Listener(
              onPointerDown: (event) {
                // 上一张
                if (currentIndex <= 0) {
                  return;
                }
                setState(() {
                  url = "";
                  currentIndex--;
                });
                Client()
                    .getSignedUrl(widget.images[currentIndex].fileId,
                        process: "image/resize,s_${600}")
                    .then((value) {
                  setState(() {
                    url = value;
                  });
                });
              },
              child: Container(
                width: 50,
                height: 50,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: const BorderRadius.all(Radius.circular(25)),
                    border: Border.all(color: Colors.white, width: 1)),
                child: const Icon(Icons.arrow_back_ios_new),
              )),
        ),
      ),
      Positioned(
        top: MediaQuery.of(context).size.height / 2 - 25,
        right: 20,
        child: MouseRegion(
            cursor: SystemMouseCursors.click,
            child: Listener(
              onPointerDown: (event) {
                // 下一张
                if (currentIndex >= widget.images.length - 1) {
                  return;
                }
                setState(() {
                  url = "";
                  currentIndex++;
                });
                Client()
                    .getSignedUrl(widget.images[currentIndex].fileId,
                        process: "image/resize,s_${600}")
                    .then((value) {
                  setState(() {
                    url = value;
                  });
                });
              },
              child: Container(
                width: 50,
                height: 50,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: const BorderRadius.all(Radius.circular(25)),
                    border: Border.all(color: Colors.white, width: 1)),
                child: const Icon(Icons.arrow_forward_ios),
              ),
            )),
      ),
      Positioned(
        left: MediaQuery.of(context).size.width / 2,
        bottom: 10,
        child: Container(
          padding:
              const EdgeInsets.only(left: 10, right: 10, top: 4, bottom: 4),
          decoration: const BoxDecoration(
              color: Color.fromARGB(157, 5, 5, 5),
              borderRadius: BorderRadius.all(Radius.circular(15))),
          child: Text(
            '${currentIndex + 1}/${widget.images.length}',
            style: const TextStyle(color: Colors.white, fontSize: 12),
          ),
        ),
      )
    ]);
  }
}
